<template>
	<view class="user-contacts l-whitespace">
		<view class="ucm-top">
			<view class="sum color2">
				{{userInfo.usernums * 10}}
			</view>
			<view class="color-9b">团队算力</view>
		</view>
		<view class="user-contacts-mod">
			<view class="ucm-l van-hairline--right">
				<view class="sum color2">
					{{userInfo.usernums || 0}}
					<text>人</text>
				</view>
				<view>团队人数</view>
			</view>
			<view class="ucm-r">
				<view class="sum color2">
					{{total}}
					<text>人</text>
				</view>
				<view>直推人数</view>
			</view>
		</view>
		
		<view class="contacts-wrap l-whitespace">
			<block v-for="(item, index) in teamNumList" :key="index">
				<view class="wpl-item van-hairline--bottom">
					<view class="wpl-item-name">
						<view slot="icon" class="avatar">
							<image class="img" src="/static/touxiang.png" mode="aspectFill"></image>
						</view>
						<view slot="title" class="name">
							<view class="vName">
								{{item.name}}
								<text
									class="btm"
									
								>
									{{item.number}}
								</text>
							</view>
							<view class="vId">会员等级：{{item.type}}</view>
							<view class="vTime">{{item.createTime}}</view>
						</view>
					</view>
					<view slot="right-icon" class="wpl-item-sum" @tap="onCall(item.number)">
						<view class="iconfont icondianhua"></view>
					</view>
				</view>
			</block>
		</view>
		<view class="no-data" v-if="!page">没有更多数据</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			teamNumList: [],
			page: 1,
			total: 0
		};
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	onShow () {
		this.getTeamNum()
	},
	methods: {
		onCall (phone) {
			if (!phone) return 
			uni.makePhoneCall({
				phoneNumber: phone 
			});
		},
		getTeamNum () {
			uni.showLoading({
				title: ''
			});
			this.$http.getTeamNum({
				size: 20,
				page: this.page
			}).then(res => {
				uni.hideLoading()
				const data = res.data;
				if (data.success) {
					if (data.data.total <= 20 * this.page) {
						this.page = 0
					}
					this.total = data.data.total
					data.data.rows.forEach(e => {
						if (e.name) {
							e.name = this.beginStr(e.name);
						} else {
							e.name = ''
						}
						this.teamNumList.push(e)
					})
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		beginStr (name) {
			let newStr;
			if (name.length === 2) {
				newStr = name.substr(0, 1) + '*';
				} else if (name.length > 2) {
				  let char = '';
				  for (let i = 0, len = name.length - 2; i < len; i++) {
					char += '*';
				  }
				  newStr = name.substr(0, 1) + char + name.substr(-1, 1);
				} else {
				  newStr = name;
				}
				return newStr;
			}
	},
	onReachBottom () {
		if (this.page < 1) return
		this.page += 1
		const number = this.ischen ? this.teamList[this.ischen].number : ''
		this.getTeamNum(number)
	}
};
</script>

<style scoped lang="scss">
image {
	width: 100%;
	height: 100%;
}
.user-contacts {
	.ucm-top {
		padding: 20upx;
		margin-top: 20upx;
		background-color: #fff;
		text-align: center;
		border-radius: 10upx;
		box-shadow: 0 5upx 15upx 0 rgba(0, 0, 0, 0.1);
		.sum {
			font-size: 40upx;
			text {
				margin-left: 10upx;
				font-size: 24upx;
				color: #9b9b9b;
			}
		}
	}
	&-mod {
		display: flex;
		padding: 20upx;
		margin-top: 20upx;
		background-color: #fff;
		border-radius: 10upx;
		box-shadow: 0 5upx 15upx 0 rgba(0, 0, 0, 0.1);
		.ucm {
			&-l,
			&-r {
				width: 50%;
				font-size: 26upx;
				color: #9b9b9b;
				text-align: center;
				.sum {
					font-size: 40upx;
					text {
						margin-left: 10upx;
						font-size: 24upx;
						color: #9b9b9b;
					}
				}
			}
		}
	}
}
.contacts {
	&-wrap {
		margin: 20upx 0;
		border-radius: 10upx; 
		background-color: #fff;
		&-tetile {
		}
		.wpl-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 0;
			&-name {
				display: flex;
				align-items: center;
				.name {
					.vName {
						font-size: 28upx;
						line-height: 1;
						display: flex;
						align-items: center;
						.btm {
							max-width: 90upx;
							max-height: 28upx;
							padding: 0 5upx;
							margin-left: 10upx;
							line-height: 1.4;
							font-size: 22upx;
							text-align: center;
							border-radius: 10%;
							color: #3e527e;
						}
					}
					.vId {
						font-size: 22upx;
						line-height: 1.8;
					}
					.vTime {
						font-size: 20upx;
						color: #9b9b9b;
					}
				}
				.avatar {
					width: 90upx;
					height: 90upx;
					margin-right: 15upx;
					border-radius: 100%;
					overflow: hidden;
				}
			}
			.icondianhua {
				width: 60upx;
				height: 60upx;
				line-height: 60upx;
				text-align: right;
				font-size: 36upx;
			}
		}
	}
}
.no-data {
	padding: 30upx;
	color: #9b9b9b;
	text-align: center;
}
</style>
